<template>
  
  <div class="kg-head-he"></div>
<header class="kg-head reg-top">
	<div class="dqxz" @click="$router.go(-1)"><i class="micon">&#xe61e;</i></div>
	<div class="search_box show-cansu">
		考级卡申请
	</div>
</header>
<!---->

<div class="kg-center">
<!---->
<router-link to="/mecode" class="ks_kjk_but">我的考级卡</router-link>

		<div class="kg-ksbox mb25">
			<div class="title">
			  <div class="title_a">请选择考级卡属地</div>
			</div>
			<div class="kg-ksxqbox">
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">考点信息</div>
					<div class="kg-ksxq-listb">
						<a-select 
							style="width: 100%"
							placeholder="请选择考试地点"
							:options = addrList
							:fieldNames = fieldNames
							@change = "addrChange"
						></a-select>
					</div>
				</div>
			</div>
		</div>

		<div class="kg-ksbox mb25" v-if="storeInfo.card_price>0">
			<div class="title">
			  <div class="title_a">费用明细</div>
			</div>
			
			<div class="kg-ksxqbox" v-if="storeInfo">
				<div class="xy-kjfyli">
					<div>工本费<span>￥ {{storeInfo.card_price}}</span></div>
				</div>
				<div class="xy-kjfyzj">
					总计：<span>￥{{storeInfo.card_price}}</span>
				</div>
			</div>
		</div>

<!---->   
	<div class="kg-ksbox mb25" v-if="storeInfo.card_price>0" >
		<div class="title">
		  <div class="title_a">扫码支付</div>
		</div>
		
		<div class="kg-ksxqbox" v-if="addr.pay_image">
			<div class="xy-kdewm">
			<span class="red">*</span> 请识别/扫描下方二维码完成付款，并上传付款详情截图，如卡费为0元直接提交确认后等待审核即可。
			<!-- <div class="xy-kdewm-img"><img :src="addr.payImage.external_url" :show-menu-by-longpress="true"/></div> -->
			<div class="xy-kdewm-img" v-if="addr && addr.pay_image">
                    <img  v-for="(item,i) in addr.pay_image" :key="i" :src="item.external_url" :show-menu-by-longpress="true" />
                </div>
			<div class="xy-kdewmtxt" v-if="addr">{{addr.title}}考点收款码</div>
			</div>
		</div>
		
		<div class="kg-ksxqbox">
			<div class="kg-ksxq-list height-auto bg-none">
				<div class="kg-ksxq-lista"><span class="red">*</span> 凭证上传</div>
				<div class="kg-ksxq-listb">
					<a-upload
							name="avatar"
							list-type="picture-card"
							class="avatar-uploader"
							:capture="null"
                            action="/upload/image"
							:show-upload-list="false"
							:customRequest="onUpload"
						>
						<div v-if="pay_image_path"><img  :src="pay_image_path" alt="avatar" /></div>
						<div v-else >
							<loading-outlined v-if="loading"></loading-outlined>
							<plus-outlined v-else></plus-outlined>
							<div class="ant-upload-text">{{percentage > 0?percentage+'%':'上传'}}</div>
						</div>
					</a-upload>
				</div>
			</div>
		</div>

		<div class="kg-ksxqbox">
			<div class="xy-kdewm ptb_a">
			注：若需要实体卡片请自行前往所选考级点领取。
			</div>
		</div>
	</div>
	<!---->
	<a-button class="but-a mt50" :disabled="disabled||isLoading" @click="submit">提交申请<a-spin v-if="isLoading"></a-spin> </a-button>
	<!---->
<!---->   	
</div>
</template>

<script>
import {addrAll as addr} from "@/api/address/index";
import {apply} from "@/api/cert/index";
import * as UploadApi from '@/api/upload'
import { toRaw,defineComponent, reactive } from 'vue';
export default defineComponent({
  name: 'Code',
  data(){
	return{
      isLoading: false,// 正在加载
	  uploadUrl: UploadApi.image,
	  addrList:[],
	  storeInfo:{},
	  fieldNames:{ label: 'title', value: 'address_id' } ,
	  addr:{},
	  pay_image_id:0,
      pay_image_path:'',
	}
  },
  created () {
    // 初始化页面
    addr().then(res=>{
		this.addrList = res.data.addressList;
		this.storeInfo= res.data.storeInfo
	})

  },
  computed:{
	 disabled () {
      return !(this.addr);
    }
  },
  methods: {
	addrChange(values,option){
		option = toRaw(option);
		this.addr = option
	},
	submit(){
		if(!this.addr.address_id) return;
		if(!this.pay_image_id && this.storeInfo.card_price>0) return;
		let pramas = {
			address_id     :this.addr.address_id,
			pay_image_id   :this.pay_image_id,
			card_price	   :this.storeInfo.card_price
		}
		this.isLoading = true;
		apply(pramas).then(result=>{
			this.isLoading = false;
			this.$message.success(result.message, 1.5);
			this.$router.push('/mecode');
		})
	},
	// 事件: 自定义上传
	onUpload (info) {
		this.isLoading = true;
		// 构建上传参数
		const formData = new FormData();
		formData.append('file', info.file)
		// 开始上传
		this.uploadUrl(formData,(progress)=>{
			this.percentage = parseInt(progress.progress*100);
			})
			.then((values) => {
				this.isLoading = false;
				this.$message.success(values.message, 1.5)
				this.pay_image_id = values.data.fileInfo.file_id;
				this.pay_image_path = values.data.fileInfo.external_url;
			})
	},
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ks_kjk_but{display: block; width: 100%; height: 1rem; line-height: 1rem; background: linear-gradient(
125deg,#c3ad7d,#d6c9ae); text-align: center; font-size:0.42rem; border-radius: .5rem; margin-bottom: .5rem; color: #fff;}
.ptb_a{padding: 20px 0 15px;}
::v-deep .ant-select,::v-deep .ant-select-focused,::v-deep .ant-select-open{border: none; box-shadow: none; background: none;}
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector,.ant-select:not(.ant-select-disabled):hover .ant-select-selector{border: none; box-shadow: none; background: none;}
::v-deep .ant-btn[disabled], ::v-deep .ant-btn[disabled]:hover, ::v-deep .ant-btn[disabled]:focus,::v-deep .ant-btn[disabled]:active{width: 100%; height: 1.066667rem; line-height: 1.066667rem; text-align: center; background: #332fab; border-radius: 0.533333rem; overflow: hidden; font-size: 0.4rem; color: #fff; box-shadow: 0 5px 10px rgba(21, 29, 194,.35); padding: 0;}

.kg-ksxq-lista{ width:2.2rem;}
.xy-kdewmtxt{margin: 0.1rem 0 0.373333rem;text-align: center; font-weight: bold; font-size: .4rem;}
::v-deep .xy-kdewm-img{ margin-bottom: 0; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100% !important;}
::v-deep .xy-kdewm-img img{max-width:calc(50% - .1rem ); width:calc(50% - .1rem ); margin-right:.2rem;}
::v-deep .xy-kdewm-img img:nth-child(2n){margin-right: 0;}
</style>
